<template>
  <div class="home-contain-div">
    <el-row :gutter="20" style="margin-bottom: 20px">
      <!--频率图-->
      <el-col :span="18" class="first-row-card-height">
        <el-card>
          <div class="card-title font-size-el line-height-none">
            <!--卫星频率图-->
            {{ $t("message.home.freqChartsCard.title") }}
            <el-button
              class="no-padding"
              style="float: right"
              @click="handleSatelliteFreqChartConfig"
              type="text"
            >
              <!--config-->
              {{ $t("message.home.freqChartsCard.configButton") }}
            </el-button>
          </div>
          <div id="freqLineChart" class="card-contain" />
        </el-card>
      </el-col>
      <!--信道利用率-->
      <el-col :span="6" class="first-row-card-height">
        <el-card>
          <div class="card-title font-size-el line-height-none">
            <!--信道利用率-->
            {{ $t("message.home.channelUtility.title") }}
          </div>
          <div class="card-contain">
            <!--业务信道-->
            <div class="progress-div">
              <div class="progress-div-text">
                {{ $t("message.home.channelUtility.channel1Name") }}
              </div>
              <el-progress
                class="progress-div-progress"
                color="#5e88c2"
                :stroke-width="16"
                :percentage="
                  $store.state.channelUtility.channelUtility.rate_traffic
                "
              />
            </div>
            <!--tdm信道-->
            <div class="progress-div">
              <div class="progress-div-text">
                {{ $t("message.home.channelUtility.channel2Name") }}
              </div>
              <el-progress
                class="progress-div-progress"
                color="#5e88c2"
                :stroke-width="16"
                :percentage="
                  $store.state.channelUtility.channelUtility.rate_tdm
                "
              />
            </div>
            <!--aloha信道-->
            <div class="progress-div">
              <div class="progress-div-text">
                {{ $t("message.home.channelUtility.channel3Name") }}
              </div>
              <el-progress
                class="progress-div-progress"
                color="#5e88c2"
                :stroke-width="16"
                :percentage="
                  $store.state.channelUtility.channelUtility.rate_aloha
                "
              />
            </div>
            <!--tdm控制信令数量-->
            <div class="progress-div">
              <div class="progress-div-text">
                {{ $t("message.home.channelUtility.channel4Name") }}
              </div>
              <div class="progress-div-count">
                {{ $store.state.ctrlCount.ctrlSignalCount.tdm }}
                <!--个/分-->
                {{ $t("message.home.channelUtility.unitName") }}
              </div>
            </div>
            <!--aloha控制信令数量-->
            <div class="progress-div">
              <div class="progress-div-text">
                {{ $t("message.home.channelUtility.channel5Name") }}
              </div>
              <div class="progress-div-count">
                {{ $store.state.ctrlCount.ctrlSignalCount.aloha }}
                <!--个/分-->
                {{ $t("message.home.channelUtility.unitName") }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 0">
      <!--地图-->
      <el-col :span="12" class="second-row-card-height">
        <el-card>
          <div class="card-title font-size-el line-height-none">
            <!--地球站分布-->
            <span v-if="charts.mapView">
              {{ $t("message.home.mapCard.title1") }}
            </span>
            <!--分级管理-->
            <span v-else>
              {{ $t("message.home.mapCard.title2") }}
            </span>
            <!--切换视图按钮-->
            <!--<el-button-->
            <!--  class="no-padding"-->
            <!--  style="float: right"-->
            <!--  v-show="charts.buttonShow"-->
            <!--  @click="charts.mapView = !charts.mapView"-->
            <!--  type="text"-->
            <!--&gt;-->
            <!--  {{ $t('message.home.mapCard.changeViewButton') }}-->
            <!--  <font-awesome-icon icon="retweet" />-->
            <!--</el-button>-->
          </div>
          <!--地图容器-->
          <!--<div-->
          <!--  v-if="charts.mapView"-->
          <!--  id="mapChart"-->
          <!--  class="card-contain"-->
          <!--/>-->
          <div v-if="charts.mapView" class="card-contain">
            <open-layers />
          </div>
          <!--网控中心树状图容器-->
          <div v-else id="treeChart" class="card-contain" />
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :span="12">
        <el-row>
          <!--远端站-->
          <el-col style="margin-bottom: 20px" class="home-table-card">
            <el-card>
              <div class="card-title font-size-el line-height-none">
                <!--远端站终端-->
                {{ $t("message.home.remoteDeviceTable.title") }}
                <el-button
                  class="no-padding"
                  style="float: right"
                  @click="remoteTerminalDeviceDialogVisible = true"
                  type="text"
                >
                  <font-awesome-icon icon="ellipsis-v" />
                </el-button>
              </div>
              <div class="card-contain">
                <!--收藏的终端的表格-->
                <el-table
                  height="100%"
                  class="table-gutter-background"
                  header-row-class-name="test-table-row-class"
                  header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
                  cell-class-name="my-table-cell"
                  :data="collectionCuTable"
                >
                  <!--空数据时slot-->
                  <div slot="empty">
                    <div class="line-height-base">
                      <!--暂无收藏-->
                      {{
                        $t("message.home.remoteCuCard.table.emptyText.label1")
                      }}
                    </div>
                    <div
                      class="empty-table-data-div"
                      @click="remoteTerminalDeviceDialogVisible = true"
                    >
                      <!--点击查看远端站终端列表-->
                      {{
                        $t("message.home.remoteCuCard.table.emptyText.label2")
                      }}
                    </div>
                  </div>
                  <!--终端编号-->
                  <el-table-column
                    :label="$t('message.home.remoteDeviceTable.col1')"
                    sortable
                    prop="device"
                    min-width="155px"
                  >
                    <template slot-scope="scope">
                      <span style="margin-left: 5px">
                        {{ scope.row.device }}
                      </span>
                    </template>
                  </el-table-column>
                  <!--状态名称-->
                  <el-table-column
                    min-width="150px"
                    :label="$t('message.home.remoteDeviceTable.col2')"
                    prop="statename"
                    :filters="[
                      {
                        text: $t('message.define.cu.state.0'),
                        value: $t('message.define.cu.state.0'),
                      },
                      {
                        text: $t('message.define.cu.state.1'),
                        value: $t('message.define.cu.state.1'),
                      },
                      {
                        text: $t('message.define.cu.state.2'),
                        value: $t('message.define.cu.state.2'),
                      },
                    ]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                  >
                    <template slot-scope="scope">
                      <font-awesome-icon
                        :style="{ color: scope.row.color }"
                        icon="circle"
                      />
                      <span style="margin-left: 5px">
                        {{ scope.row.statename }}
                      </span>
                    </template>
                  </el-table-column>
                  <!--经纬度-->
                  <el-table-column
                    :label="$t('message.home.remoteDeviceTable.col3')"
                    prop="coords"
                    min-width="160px"
                  />
                  <!--电话号码-->
                  <el-table-column
                    :label="$t('message.home.remoteDeviceTable.col4')"
                    prop="number"
                    min-width="160px"
                  />
                  <!--操作-->
                  <el-table-column
                    min-width="220px"
                    :label="$t('message.home.remoteDeviceTable.col6')"
                  >
                    <template slot-scope="scope">
                      <!--退网-->
                      <el-button
                        :disabled="scope.row.state === 0"
                        style="padding: 5px"
                        @click.stop="controlRemoteCu(scope.row, 'logout')"
                        type="primary"
                        size="mini"
                      >
                        {{ $t("message.home.remoteDeviceTable.button1") }}
                      </el-button>
                      <!--重新入网-->
                      <el-button
                        :disabled="scope.row.state === 0"
                        style="padding: 5px"
                        @click.stop="controlRemoteCu(scope.row, 'relogin')"
                        type="primary"
                        size="mini"
                      >
                        {{ $t("message.home.remoteDeviceTable.button2") }}
                      </el-button>
                      <!--建链-->
                      <!--<el-button-->
                      <!--  :disabled="scope.row.state === 0"-->
                      <!--  style="padding: 5px"-->
                      <!--  @click.stop="handleCuCallBridge(scope.row)"-->
                      <!--  type="primary"-->
                      <!--  size="mini"-->
                      <!--&gt;-->
                      <!--  {{ $t('message.home.remoteDeviceTable.button3') }}-->
                      <!--</el-button>-->
                      <!--拆链-->
                      <!--<el-button-->
                      <!--  :disabled="scope.row.state === 0"-->
                      <!--  style="padding: 5px"-->
                      <!--  @click.stop="handleCuCallBridgeEnd(scope.row)"-->
                      <!--  type="primary"-->
                      <!--  size="mini"-->
                      <!--&gt;-->
                      <!--  {{ $t('message.home.remoteDeviceTable.button4') }}-->
                      <!--</el-button>-->
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <!--中心站-->
          <el-col class="home-table-card">
            <el-card>
              <div class="card-title font-size-el line-height-none">
                <!--中心站终端-->
                {{ $t("message.home.centerDeviceTable.title") }}
                <el-button
                  class="no-padding"
                  style="float: right"
                  @click="centerTerminalDeviceDialogVisible = true"
                  type="text"
                >
                  <font-awesome-icon icon="ellipsis-v" />
                </el-button>
              </div>
              <!--中心站终端-->
              <div class="card-contain">
                <el-table
                  height="100%"
                  class="table-gutter-background"
                  header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
                  cell-class-name="my-table-cell"
                  :data="centerStationDeviceTable"
                >
                  <!--终端编号-->
                  <el-table-column
                    :label="$t('message.home.centerDeviceTable.col1')"
                    prop="device"
                    min-width="140px"
                  />
                  <!--状态-->
                  <el-table-column
                    :label="$t('message.home.centerDeviceTable.col3')"
                    prop="statename"
                    min-width="100px"
                    :filters="[
                      {
                        text: $t('message.define.cu.state.0'),
                        value: $t('message.define.cu.state.0'),
                      },
                      {
                        text: $t('message.define.cu.state.1'),
                        value: $t('message.define.cu.state.1'),
                      },
                      {
                        text: $t('message.define.cu.state.2'),
                        value: $t('message.define.cu.state.2'),
                      },
                      {
                        text: $t('message.define.ccu.state.0'),
                        value: $t('message.define.ccu.state.0'),
                      },
                      {
                        text: $t('message.define.ccu.state.1'),
                        value: $t('message.define.ccu.state.1'),
                      },
                    ]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                  >
                    <template slot-scope="scope">
                      <font-awesome-icon
                        :style="{ color: scope.row.color }"
                        icon="circle"
                      />
                      <span style="margin-left: 5px">
                        {{ scope.row.statename }}
                      </span>
                    </template>
                  </el-table-column>
                  <!--服务类型-->
                  <el-table-column
                    :label="$t('message.home.centerDeviceTable.col2')"
                    prop="kindname"
                    min-width="225px"
                  />
                  <!--发送频点-->
                  <el-table-column
                    :label="$t('message.home.centerDeviceTable.col4')"
                    prop="sendFreqFormat"
                    min-width="135px"
                  />
                  <!--接收频点-->
                  <!--<el-table-column-->
                  <!--  :label="$t('message.home.centerDeviceTable.col5')"-->
                  <!--  prop="receiveFreqFormat"-->
                  <!--  min-width="135px"-->
                  <!--/>-->
                  <!--操作-->
                  <el-table-column
                    :label="$t('message.home.centerDeviceTable.col6')"
                    min-width="180px"
                  >
                    <template slot-scope="scope">
                      <el-button
                        :disabled="scope.row.state !== 0"
                        v-if="scope.row.type === 'cu'"
                        style="padding: 5px"
                        @click.stop="controlCenterCu(scope.row, 'login')"
                        type="primary"
                        size="mini"
                      >
                        {{ $t("message.home.centerDeviceTable.button1") }}
                      </el-button>
                      <el-button
                        v-if="scope.row.type === 'cu'"
                        :disabled="scope.row.state === 0"
                        style="padding: 5px"
                        @click.stop="controlCenterCu(scope.row, 'logout')"
                        type="primary"
                        size="mini"
                      >
                        {{ $t("message.home.centerDeviceTable.button2") }}
                      </el-button>
                      <el-button
                        v-if="scope.row.type === 'cu'"
                        :disabled="scope.row.state === 0"
                        style="padding: 5px"
                        @click.stop="controlCenterCu(scope.row, 'relogin')"
                        type="primary"
                        size="mini"
                      >
                        {{ $t("message.home.centerDeviceTable.button3") }}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!--dialog-->
    <div>
      <!--卫星频率图配置dialog-->
      <el-dialog
        v-loading="satelliteFreqConfig.loading"
        style="text-align: left"
        :title="$t('message.home.dialog.satelliteConfig.title')"
        width="600px"
        :close-on-click-modal="false"
        :visible.sync="satelliteFreqConfig.visible"
      >
        <!--显示的卫星 隐藏的卫星-->
        <el-transfer
          :titles="[
            $t('message.home.dialog.satelliteConfig.transfer.title1'),
            $t('message.home.dialog.satelliteConfig.transfer.title2'),
          ]"
          v-model="satelliteFreqConfig.transferedData"
          :data="effectiveSatelliteList"
        />
        <div slot="footer">
          <el-button @click="handleSatelliteFreqConfigSubmit" type="primary">
            <!--确定-->
            {{ $t("message.common.button.confirm") }}
          </el-button>
        </div>
      </el-dialog>
      <!--远端站终端dialog-->
      <el-dialog
        custom-class="remote-dialog"
        v-loading="cuSearchConfig.loading"
        @open="getCuList"
        :title="$t('message.home.remoteDeviceTable.title')"
        top="2%"
        width="1650px"
        :close-on-click-modal="false"
        :visible.sync="remoteTerminalDeviceDialogVisible"
      >
        <div class="remote-dialog-search-div">
          <font-awesome-icon
            style="margin-right: 20px"
            icon="search"
            size="lg"
          />
          <el-input
            style="width: 250px; margin-right: 20px"
            size="small"
            v-model="cuSearchConfig.info"
          />
          <el-button
            @click="handleRemoteTableSearch"
            type="primary"
            size="mini"
          >
            <!--查询按钮-->
            {{ $t("message.home.remoteDeviceTable.search.searchButton") }}
            <el-popover
              placement="bottom-start"
              width="200"
              trigger="hover"
              :content="
                $t('message.home.remoteDeviceTable.search.searchPrompt')
              "
            >
              <font-awesome-icon
                slot="reference"
                style="vertical-align: top"
                :icon="['far', 'question-circle']"
              />
            </el-popover>
          </el-button>
        </div>
        <el-table
          @sort-change="handleCuListSort"
          height="700px"
          class="table-gutter-background"
          header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
          cell-class-name="my-table-cell"
          :data="remoteCuDeviceTable"
        >
          <!--终端编号-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col1')"
            sortable="custom"
            prop="device"
            min-width="160px"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                v-if="!scope.row.collected"
                @click="handleCuCollection(scope.$index, scope.row.id)"
                style="color: #5098ef; cursor: pointer"
                :icon="['far', 'star']"
              />
              <font-awesome-icon
                v-else
                @click="handleCuCollectionCancel(scope.$index, scope.row.id)"
                style="color: #5098ef; cursor: pointer"
                :icon="['fas', 'star']"
              />
              <span style="margin-left: 5px">
                {{ scope.row.device }}
              </span>
            </template>
          </el-table-column>
          <!--地球站名称-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog1')"
            prop="station_name"
            min-width="110px"
          />
          <!--状态-->
          <el-table-column
            min-width="150px"
            :label="$t('message.home.remoteDeviceTable.col2')"
            prop="statename"
            :filters="[
              {
                text: $t('message.define.cu.state.0'),
                value: $t('message.define.cu.state.0'),
              },
              {
                text: $t('message.define.cu.state.1'),
                value: $t('message.define.cu.state.1'),
              },
              {
                text: $t('message.define.cu.state.2'),
                value: $t('message.define.cu.state.2'),
              },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                :style="{ color: scope.row.color }"
                icon="circle"
              />
              <span style="margin-left: 5px">
                {{ scope.row.statename }}
              </span>
            </template>
          </el-table-column>
          <!--省份-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog6')"
            prop="city"
            min-width="115px"
          />
          <!--坐标-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col3')"
            prop="coords"
            min-width="195px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.coords }}</span>
                <el-button
                  type="text"
                  style="padding: 0 15px 0 0"
                  @click="handleStationCoordsModify(scope.row)"
                >
                  <img
                    style="width: 1em; margin-left: 5px"
                    src="@/assets/common/edit.png"
                  />
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--电话号码-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col4')"
            prop="number"
          />
          <!--终端类型-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col5')"
            prop="unit_type"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{
                $t("message.define.cu.unit_type")[scope.row.unit_type]
              }}</span>
            </template>
          </el-table-column>
          <!--TDM信噪比-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog4')"
            prop="snr1"
            min-width="155px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.snr1 }}</span>
                <el-button
                  class="refresh-button"
                  style="padding: 0 15px 0 0"
                  type="text"
                  @click="handleSnrRefresh(scope.row)"
                >
                  <font-awesome-icon icon="sync-alt" />
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--业务信噪比-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog5')"
            prop="snr2"
            min-width="170px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.snr2 }}</span>
                <el-button
                  type="text"
                  style="padding: 0 15px 0 0"
                  @click="handleSnrRefresh(scope.row)"
                >
                  <font-awesome-icon class="refresh-button" icon="sync-alt" />
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--发送频点-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog2')"
            prop="sendFreqFormat"
            min-width="150px"
          />
          <!--接收频点-->
          <!--<el-table-column-->
          <!--  :label="$t('message.home.remoteDeviceTable.colDialog3')"-->
          <!--  prop="receiveFreq"-->
          <!--  min-width="150px"-->
          <!--/>-->
          <!--操作-->
          <el-table-column
            fixed="right"
            min-width="220px"
            :label="$t('message.home.remoteDeviceTable.col6')"
          >
            <template slot-scope="scope">
              <el-button-group>
                <!--退网-->
                <el-button
                  :disabled="scope.row.state === 0"
                  style="padding: 5px"
                  @click.stop="controlRemoteCu(scope.row, 'logout')"
                  type="primary"
                  size="mini"
                >
                  {{ $t("message.home.remoteDeviceTable.button1") }}
                </el-button>
                <!--入网-->
                <el-button
                  :disabled="scope.row.state === 0"
                  style="padding: 5px"
                  @click.stop="controlRemoteCu(scope.row, 'relogin')"
                  type="primary"
                  size="mini"
                >
                  {{ $t("message.home.remoteDeviceTable.button2") }}
                </el-button>
                <!--建链-->
                <!--<el-button-->
                <!--  :disabled="scope.row.state === 0"-->
                <!--  style="padding: 5px"-->
                <!--  @click.stop="handleCuCallBridge(scope.row)"-->
                <!--  type="primary"-->
                <!--  size="mini"-->
                <!--&gt;-->
                <!--  {{ $t('message.home.remoteDeviceTable.button3') }}-->
                <!--</el-button>-->
                <!--拆链-->
                <!--<el-button-->
                <!--  :disabled="scope.row.state === 0"-->
                <!--  style="padding: 5px"-->
                <!--  @click.stop="handleCuCallBridgeEnd(scope.row)"-->
                <!--  type="primary"-->
                <!--  size="mini"-->
                <!--&gt;-->
                <!--  {{ $t('message.home.remoteDeviceTable.button4') }}-->
                <!--</el-button>-->
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSearchCuSizeChange"
          @current-change="handleSearchCuPageChange"
          class="pagination-position"
          background
          :page-sizes="[10, 20, 50]"
          :page-size="cuSearchConfig.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="$store.state.cu.cuCount"
        />
      </el-dialog>
      <!--中心站终端dialog-->
      <el-dialog
        :title="$t('message.home.centerDeviceTable.title')"
        top="2%"
        width="1300px"
        :close-on-click-modal="false"
        :visible.sync="centerTerminalDeviceDialogVisible"
      >
        <el-table
          height="750px"
          class="table-gutter-background"
          header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
          cell-class-name="my-table-cell"
          :data="centerStationDeviceTable"
        >
          <!--终端编号-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.col1')"
            prop="device"
            min-width="140px"
          />
          <!--状态-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.col3')"
            prop="statename"
            min-width="100px"
            :filters="[
              {
                text: $t('message.define.cu.state.0'),
                value: $t('message.define.cu.state.0'),
              },
              {
                text: $t('message.define.cu.state.1'),
                value: $t('message.define.cu.state.1'),
              },
              {
                text: $t('message.define.cu.state.2'),
                value: $t('message.define.cu.state.2'),
              },
              {
                text: $t('message.define.ccu.state.0'),
                value: $t('message.define.ccu.state.0'),
              },
              {
                text: $t('message.define.ccu.state.1'),
                value: $t('message.define.ccu.state.1'),
              },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                :style="{ color: scope.row.color }"
                icon="circle"
              />
              <span style="margin-left: 5px">
                {{ scope.row.statename }}
              </span>
            </template>
          </el-table-column>
          <!--服务类型-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.col2')"
            prop="kindname"
            min-width="225px"
          />
          <!--发送频点-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.col4')"
            prop="sendFreqFormat"
            min-width="140px"
          />
          <!--接收频点-->
          <!--<el-table-column
            :label="$t('message.home.centerDeviceTable.col5')"
            prop="receiveFreqFormat"
            min-width="140px"
          />-->
          <!--终端类型-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.colDialog1')"
            prop="unit_type"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{
                $t("message.define.cu.unit_type")[scope.row.unit_type]
              }}</span>
            </template>
          </el-table-column>
          <!--操作-->
          <el-table-column
            :label="$t('message.home.centerDeviceTable.col6')"
            min-width="180px"
          >
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.state !== 0"
                v-if="scope.row.type === 'cu'"
                style="padding: 5px"
                @click.stop="controlCenterCu(scope.row, 'login')"
                type="primary"
                size="mini"
              >
                <!--入网-->
                {{ $t("message.home.centerDeviceTable.button1") }}
              </el-button>
              <el-button
                v-if="scope.row.type === 'cu'"
                :disabled="scope.row.state === 0"
                style="padding: 5px"
                @click.stop="controlCenterCu(scope.row, 'logout')"
                type="primary"
                size="mini"
              >
                <!--退网-->
                {{ $t("message.home.centerDeviceTable.button2") }}
              </el-button>
              <el-button
                v-if="scope.row.type === 'cu'"
                :disabled="scope.row.state === 0"
                style="padding: 5px"
                @click.stop="controlCenterCu(scope.row, 'relogin')"
                type="primary"
                size="mini"
              >
                <!--重新入网-->
                {{ $t("message.home.centerDeviceTable.button3") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--修改地球站经纬度-->
      <el-dialog
        :title="$t('message.home.changeStationCoordsDialog.title')"
        width="15%"
        :visible.sync="station.visible"
      >
        <el-form
          ref="stationForm"
          :model="station.form"
          :rules="station.rules"
          label-width="100px"
        >
          <!--地球站-->
          <el-form-item
            style="text-align: left"
            :label="$t('message.home.changeStationCoordsDialog.form.label1')"
          >
            <span>{{ station.form.station_name }}</span>
          </el-form-item>
          <!--经度-->
          <el-form-item
            :label="$t('message.home.changeStationCoordsDialog.form.label2')"
            prop="longitude"
          >
            <el-input v-model="station.form.longitude" />
          </el-form-item>
          <!--纬度-->
          <el-form-item
            :label="$t('message.home.changeStationCoordsDialog.form.label3')"
            prop="latitude"
          >
            <el-input v-model="station.form.latitude" />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="station.loading"
              @click="submitForm()"
              type="primary"
            >
              <!--确定-->
              {{ $t("message.common.button.confirm") }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--终端建链dialog-->
      <el-dialog
        :title="$t('message.home.cuCallBridge.title')"
        width="15%"
        :visible.sync="cuCallBridge.visible"
      >
        <el-form
          ref="cuCallBridgeForm"
          :model="cuCallBridge.form"
          :rules="cuCallBridge.rules"
          label-width="100px"
        >
          <!--发送速率-->
          <el-form-item
            :label="$t('message.home.cuCallBridge.form.label1')"
            prop="speed_send"
          >
            <el-select v-model="cuCallBridge.form.speed_send">
              <el-option
                v-for="item in cuCallBridge.form.speedOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--接收速率-->
          <el-form-item
            :label="$t('message.home.cuCallBridge.form.label2')"
            prop="speed_receive"
          >
            <el-select v-model="cuCallBridge.form.speed_receive">
              <el-option
                v-for="item in cuCallBridge.form.speedOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--提交-->
          <el-form-item class="button-form-item">
            <el-button
              :loading="cuCallBridge.loading"
              @click="handleCuCallBridgeSubmit()"
              type="primary"
            >
              <!--确定-->
              {{ $t("message.common.button.confirm") }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import OpenLayers from "@/components/OpenLayers.vue";
import echarts from "echarts";
require("echarts/map/js/china");
export default {
  name: "HomeNew",
  components: {
    OpenLayers,
  },
  watch: {
    // 更新频率图
    usingChannels() {
      this.$nextTick(() => {
        this.createFreqLineCharts(true);
      });
    },
  },
  computed: {
    // freqlinedata
    effectiveSatelliteList() {
      let res = [];
      let effectiveSatelliteList = this.$store.state.satellite
        .effectiveSatelliteList;
      for (let i in effectiveSatelliteList) {
        res.push({
          key: i,
          id: effectiveSatelliteList[i].id,
          label: effectiveSatelliteList[i].name,
        });
      }
      return res;
    },
    usingChannels() {
      let effectiveSatelliteList = [
        ...this.$store.state.satellite.filteredEffectiveSatelliteList,
      ];
      let effectiveSatelliteIdList = effectiveSatelliteList.map(
        (item) => item.id
      );
      return [
        ...this.$store.getters.getCtrlFreqSegmentChartData,
        ...this.$store.getters.getTafficFreqSegmentChartData,
      ]
        .filter((item) =>
          effectiveSatelliteIdList.find((id) => id === item.satellite)
        )
        .map((item) => {
          let index = null;
          for (let i in effectiveSatelliteList) {
            if (item.satellite === effectiveSatelliteList[i].id) {
              index = parseInt(i);
              break;
            }
          }
          return {
            name: item.satellite_name,
            type: item.type,
            value: [
              index,
              item.down_freq_begin,
              item.down_freq_end,
              item.color,
            ],
            itemStyle: {
              normal: {
                color: item.color,
              },
            },
            tooltip: {
              formatter: (params) => {
                // 类型
                // 下行起始频点
                // 下行终止频点
                return `${params.name}<br />
                      ${this.$t(
                        "message.home.freqChartsCard.chart.tooltip.type"
                      )}：${item.type}<br />
                      ${this.$t(
                        "message.home.freqChartsCard.chart.tooltip.downFreqBegin"
                      )}：${this.$service.miliFormat(
                  item.down_freq_begin
                )} KHz<br />
                      ${this.$t(
                        "message.home.freqChartsCard.chart.tooltip.downFreqEnd"
                      )}：${this.$service.miliFormat(item.down_freq_end)} KHz`;
              },
            },
          };
        });
    },
    // 控制信令数量图
    signalingCount() {
      return {
        tdm: this.$store.getters.getTdmSignalingCount,
        aloha: this.$store.getters.getAlohaSignalingCount,
      };
    },
    // collection cu
    collectionCuTable() {
      return this.$store.getters.getCuOfCollection.map((item) => {
        return {
          ...item,
          coords: `${item.longitude},${item.latitude}`,
          statename: this.$t(`message.define.cu.state.${item.state}`),
          color: this.$t(`message.define.cu.state.color.${item.state}`),
        };
      });
    },
    // 地球站列表，绘制地图用
    stationList() {
      return this.$store.state.station.stationList.map((item) => {
        return {
          name: item.name,
          state: item.state,
          value: [
            item.longitude,
            item.latitude,
            this.$t(`message.define.cu.state.${item.state}`),
          ],
        };
      });
    },
    mapLineData() {
      return this.$store.state.station.stationMapLine;
    },
    remoteCuDeviceTable() {
      return this.$store.getters.getCuOfRemote.map((item) => {
        return {
          ...item,
          coords: `${item.longitude},${item.latitude}`,
          sendFreq: item.send_freq / 1000,
          sendFreqFormat: this.$service.miliFormat(item.send_freq / 1000),
          statename: this.$t(`message.define.cu.state.${item.state}`),
          color: this.$t(`message.define.cu.state.color.${item.state}`),
          snr1: item.snr1,
          snr2: item.snr2,
        };
      });
    },
    // 中心站tabledata
    centerStationDeviceTable() {
      return [
        ...this.$store.getters.getCuOfCenter.map((item) => {
          return {
            ...item,
            sendFreq: item.send_freq / 1000,
            sendFreqFormat: this.$service.miliFormat(item.send_freq / 1000),
            // receiveFreq: item.recv_freq / 1000,
            kindname: this.$t(`message.define.cu.kind.${item.kind}`),
            statename: this.$t(`message.define.cu.state.${item.state}`),
            color: this.$t(`message.define.cu.state.color.${item.state}`),
          };
        }),
        ...this.$store.state.ccu.ccuListNcp.map((item) => {
          return {
            ...item,
            device: item.device,
            kindname: this.$t("message.define.ccu.kindname"),
            sendFreq: item.send_freq / 1000,
            // receiveFreq: item.recv_freq / 1000,
            sendFreqFormat: this.$service.miliFormat(item.send_freq / 1000),
            // receiveFreqFormat: this.$service.miliFormat(item.receiveFreq / 1000),
            state: item.is_connected ? 1 : 0,
            statename: item.is_connected
              ? this.$t("message.define.ccu.state.1")
              : this.$t("message.define.ccu.state.0"),
            color: this.$t(
              `message.define.ccu.state.color.${item.is_connected ? "1" : "0"}`
            ),
          };
        }),
      ];
    },
  },
  data() {
    return {
      charts: {
        // 频率图
        freqChart: null,
        // 地图
        mapView: true,
        mapChart: null,
        // 网控中心树图
        treeChart: null,
        // 切换视图按钮显示控制
        buttonShow: false,
      },

      // 卫星频率图配置
      satelliteFreqConfig: {
        loading: false,
        visible: false,

        transferedData: [],
      },

      remoteTerminalDeviceDialogVisible: false,
      // cuListDialog查询属性
      cuSearchConfig: {
        loading: false,

        ordering: "device",
        page: 1,
        pageSize: 10,

        info: "",
      },

      station: {
        visible: false,
        loading: false,
        form: {
          id: "",
          longitude: "",
          latitude: "",
        },
        rules: {
          longitude: [
            // 请输入经度
            {
              required: true,
              message: this.$t(
                "message.home.changeStationCoordsDialog.form.rules.err1"
              ),
              trigger: "blur",
            },
          ],
          latitude: [
            // 请输入纬度
            {
              required: true,
              message: this.$t(
                "message.home.changeStationCoordsDialog.form.rules.err2"
              ),
              trigger: "blur",
            },
          ],
        },
      },

      cuCallBridge: {
        loading: false,
        visible: false,

        form: {
          id: "",

          speedOption: [],

          speed_send: "",
          speed_receive: "",
        },
        rules: {
          speed_send: [
            // 请选择发送速率
            {
              required: true,
              message: this.$t("message.home.cuCallBridge.form.rules.err1"),
              trigger: "change",
            },
          ],
          speed_receive: [
            // 请选择接收速率
            {
              required: true,
              message: this.$t("message.home.cuCallBridge.form.rules.err2"),
              trigger: "change",
            },
          ],
        },
      },

      centerTerminalDeviceDialogVisible: false,
    };
  },
  mounted() {
    let self = this;
    self.$nextTick(() => {
      // 初始化表格数据
      self.initTable();
      // 绘制控制信令数量图
      self.initCtrlCount();
      // 绘制频率图
      self.initFreqLine();
    });
  },
  methods: {
    // 初始化频率图
    async initFreqLine() {
      let self = this;
      try {
        await self.$store.dispatch(`getEffectiveSatelliteList`);
      } catch (e) {}
      try {
        await self.$store.dispatch(`getUsingCtrlChannel`);
      } catch (e) {}
      try {
        await self.$store.dispatch(`getUsingTrafficChannel`);
      } catch (e) {}
      try {
        await self.$store.dispatch(`getUsingSubscribeFreqSegment`);
      } catch (e) {}
      self.createFreqLineCharts();
    },
    async initCtrlCount() {
      let self = this;
      try {
        await self.$store.dispatch(`getCtrlCount`);
      } catch (e) {}
    },
    async initTable() {
      let self = this;
      self.$store.dispatch(`getCuList`);
      self.$store.dispatch(`getCollectionCuList`);
      self.$store.dispatch(`getCcuListNcp`);
    },
    // 频率段图
    createFreqLineCharts(update = false) {
      let self = this;
      if (self.charts.freqChart === null) {
        self.charts.freqChart = echarts.init(
          document.getElementById("freqLineChart")
        );
      }
      let lineData = [];
      let categories = [];

      let usingChannels = self.usingChannels;
      // let satelliteData = self.$store.state.satellite.effectiveSatelliteList
      let satelliteData =
        self.$store.state.satellite.filteredEffectiveSatelliteList;

      for (let i in satelliteData) {
        categories.push(satelliteData[i].name);
        for (let freqItem of satelliteData[i].freq_segments) {
          lineData.push({
            name: satelliteData[i].name,
            value: [
              parseInt(i),
              freqItem.down_freq_begin / 1000,
              freqItem.down_freq_end / 1000,
            ],
            itemStyle: {
              normal: {
                color: "#5098ff",
              },
            },
            tooltip: {
              formatter: (params) => {
                // 卫星
                // 波束
                // 转发器
                // 下行起始频点
                // 下行终止频点
                return `${this.$t(
                  "message.home.freqChartsCard.chart.tooltip.satellite"
                )}：${params.name}<br />
                        ${this.$t(
                          "message.home.freqChartsCard.chart.tooltip.beam"
                        )}：${freqItem.beam_name}<br />
                        ${this.$t(
                          "message.home.freqChartsCard.chart.tooltip.transponder"
                        )}：${freqItem.transponder_name}<br />
                        ${this.$t(
                          "message.home.freqChartsCard.chart.tooltip.downFreqBegin"
                        )}：${self.$service.miliFormat(
                  freqItem.down_freq_begin / 1000
                )} KHz<br />
                        ${this.$t(
                          "message.home.freqChartsCard.chart.tooltip.downFreqEnd"
                        )}：${self.$service.miliFormat(
                  freqItem.down_freq_end / 1000
                )} KHz`;
              },
            },
          });
        }
      }

      function testNewLine(params, api) {
        let halfWidth = api.size([0, 1])[1] * 0.3;
        let yValue = api.value(0);
        let lowXpoint = api.coord([api.value(1), yValue]);
        let highXpoint = api.coord([api.value(2), yValue]);
        let style = api.style({
          stroke: api.value(3),
          fill: api.value(3),
          lineWidth: 2,
        });
        return {
          type: "bezierCurve",
          shape: {
            x1: lowXpoint[0],
            y1: lowXpoint[1] + halfWidth,
            cpx1: (lowXpoint[0] + highXpoint[0]) / 2,
            cpy1: lowXpoint[1] - halfWidth * 3,
            x2: highXpoint[0],
            y2: highXpoint[1] + halfWidth,
          },
          style: style,
        };
      }

      // 自定义渲染custom
      function renderFreqBoundLine(params, api) {
        let yValue = api.value(0);
        let lowXpoint = api.coord([api.value(1), yValue]);
        let highXpoint = api.coord([api.value(2), yValue]);
        let halfWidth = api.size([0, 1])[1] * 0.3;
        let style = api.style({
          stroke: "#a2a2a2",
          fill: null,
        });
        // console.log(`起点：${lowXpoint[0]},${lowXpoint[1]}终点：${highXpoint[0]},${highXpoint[1]}`)
        return {
          type: "group",
          children: [
            {
              type: "line",
              shape: {
                x1: lowXpoint[0],
                y1: lowXpoint[1] - halfWidth,
                x2: lowXpoint[0],
                y2: lowXpoint[1] + halfWidth,
              },
              style: style,
            },
            {
              type: "line",
              shape: {
                x1: lowXpoint[0],
                y1: lowXpoint[1] + halfWidth,
                x2: highXpoint[0],
                y2: highXpoint[1] + halfWidth,
              },
              style: style,
            },
            {
              type: "line",
              shape: {
                x1: highXpoint[0],
                y1: highXpoint[1] - halfWidth,
                x2: highXpoint[0],
                y2: highXpoint[1] + halfWidth,
              },
              style: style,
            },
          ],
        };
      }

      let dataZoomX = [
        {
          type: "slider",
          xAxisIndex: 0,
          filterMode: "weakFilter",
          showDataShadow: false,
          bottom: 5,
          height: 6,
          borderColor: "transparent",
          backgroundColor: "#e2e2e2",
          handleIcon:
            "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
          handleSize: 12,
          handleStyle: {
            shadowBlur: 4,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: "#aaa",
          },
          labelFormatter: "",
        },
        {
          type: "inside",
          id: "insideX",
          xAxisIndex: 0,
          filterMode: "weakFilter",
          zoomOnMouseWheel: true,
          moveOnMouseMove: true,
        },
      ];

      let dataZoomY = [
        {
          type: "slider",
          yAxisIndex: 0,
          zoomLock: true,
          width: 10,
          right: 10,
          top: 0,
          bottom: 50,
          handleSize: 0,
          showDetail: false,
          startValue: 0,
          endValue: 2,
        },
        {
          type: "inside",
          id: "insideY",
          yAxisIndex: 0,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: false,
          startValue: 0,
          endValue: 1,
        },
      ];

      let series = [
        // freqLine
        {
          name: "",
          type: "custom",
          renderItem: testNewLine,
          itemStyle: {
            normal: {
              opacity: 0.6,
            },
          },
          encode: {
            x: [1, 2],
            y: 0,
          },
          data: usingChannels,
          animation: false,
        },
        // freqBound
        {
          name: "",
          type: "custom",
          itemStyle: {
            normal: {
              color: "gray",
              borderWidth: 1.5,
            },
          },
          renderItem: renderFreqBoundLine,
          encode: {
            x: [1, 2],
            y: 0,
          },
          zlevel: -1,
          data: lineData,
          animation: false,
        },
      ];

      let option = {
        tooltip: {
          show: true,
        },
        dataZoom: [
          ...dataZoomX,
          ...(satelliteData.length > 3 ? dataZoomY : []),
        ],
        grid: {
          top: 0,
          left: 0,
          right: 10,
          bottom: 20,
          containLabel: true,
        },
        xAxis: {
          min: "dataMin",
          max: "dataMax",
          // min: function (value) {
          //   let margin = (value.max - value.min) / 20
          //   console.log(parseInt(value.min - margin))
          //   return parseInt(value.min - margin)
          // },
          // max: function (value) {
          //   let margin = (value.max - value.min) / 20
          //   return parseInt(value.max + margin)
          // },
          scale: true,
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}KHz",
            align: "left",
            showMaxLabel: false,
          },
        },
        yAxis: {
          type: "category",
          data: categories,
          inverse: true,
          axisLabel: {
            inside: true,
          },
        },
        series: series,
      };

      if (update === true) {
        self.charts.freqChart.setOption(option);
      } else {
        self.charts.freqChart.setOption(option, { notMerge: true });
      }
    },
    handleSatelliteFreqChartConfig() {
      let self = this;
      let filterSatelliteIds =
        JSON.parse(localStorage.getItem("filterSatelliteIds")) || [];
      let filterSatelliteKeys = filterSatelliteIds.map((satellite) => {
        return (
          self.effectiveSatelliteList.find((satelliteItem) => {
            return satelliteItem.id === satellite;
          }) &&
          self.effectiveSatelliteList.find((satelliteItem) => {
            return satelliteItem.id === satellite;
          }).key
        );
      });
      self.satelliteFreqConfig.transferedData = filterSatelliteKeys;
      self.satelliteFreqConfig.visible = true;
    },
    handleSatelliteFreqConfigSubmit() {
      let self = this;
      let filterSatelliteIds = self.satelliteFreqConfig.transferedData.map(
        (key) => {
          return (
            self.effectiveSatelliteList.find((satelliteItem) => {
              return satelliteItem.key === key;
            }) &&
            self.effectiveSatelliteList.find((satelliteItem) => {
              return satelliteItem.key === key;
            }).id
          );
        }
      );
      // 弱无法找到，则删除null元素
      filterSatelliteIds = filterSatelliteIds.filter((key) => key);
      localStorage.setItem(
        "filterSatelliteIds",
        JSON.stringify(filterSatelliteIds)
      );
      self.$store.commit(
        "setFilteredEffectiveSatelliteList",
        self.$store.state.satellite.effectiveSatelliteList
      );
      self.satelliteFreqConfig.visible = false;
      self.createFreqLineCharts();
    },
    // 网控中心树图
    createTreeChart() {
      let self = this;
      // 判断当前视图是否为tree,若不是则直接return
      if (self.charts.mapView) return;
      if (self.charts.treeChart === null) {
        self.charts.treeChart = echarts.init(
          document.getElementById("treeChart")
        );
      }
      self.charts.treeChart.setOption({
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            top: "50px",
            right: 0,
            bottom: "50px",
            left: 0,
            symbol: "rect",
            symbolSize: [120, 60],
            orient: "vertical",
            expandAndCollapse: false,
            lineStyle: {
              curveness: 0,
            },
            label: {
              position: "inside",
              verticalAlign: "middle",
              align: "middle",
              distance: 18,
              fontSize: 12,
              padding: 5,
              borderWidth: 4,
              borderRadius: 5,
              color: "#fff",
              backgroundColor: "transparent",
              formatter: (params) => {
                // 名称   地址
                return `${self.$t("message.home.mapCard.treeLabel.label1")}: ${
                  params.name
                }\n${self.$t("message.home.mapCard.treeLabel.label2")}: ${
                  params.data.address
                }`;
              },
            },
            leaves: {
              label: {
                position: "inside",
                verticalAlign: "middle",
                align: "middle",
              },
            },
            data: self.$store.getters.LtlTreeChart,
          },
        ],
      });
      self.treeChart.on("click", async (params) => {
        if (!params.data.is_online) {
          // 该网控未在线,无法访问!
          self.$message.error(
            self.$t("message.home.mapCard.ltlErr.ncpNotOnline")
          );
        } else {
          // 取回本网控UID并检验
          let selfNetworkUid = self.$store.state.selfNetworkUid;
          if (selfNetworkUid) {
            let url = window.location.href.split("#")[0];
            if (selfNetworkUid === params.data.uid) {
              window.open(`${url}`);
            } else {
              localStorage.setItem(
                params.data.uid,
                JSON.stringify(params.data)
              );
              window.open(`${url}#/?uid=${params.data.uid}`);
            }
          } else {
            // 获取分级管理信息失败
            self.$message.error(
              self.$t("message.home.mapCard.ltlErr.getInfoErr")
            );
          }
        }
      });
    },
    // table的标签过滤方法
    filterTag(value, row) {
      return row.statename === value;
    },
    controlRemoteCu(row, operate) {
      let self = this;
      self.$store.dispatch("axios", {
        method: "post",
        url: `/api/abs/ncp/cu_command/${row.id}/${operate}/`,
      });
    },
    controlCenterCu(row, operate) {
      let self = this;
      self.$store.dispatch("axios", {
        method: "post",
        url: `/api/abs/ncp/cu_command/${row.id}/${operate}/`,
      });
    },
    // culist的分页
    async getCuList() {
      let self = this;
      try {
        self.cuSearchConfig.loading = true;
        await self.$store.dispatch(`getCuList`, {
          ordering: self.cuSearchConfig.ordering,

          page: self.cuSearchConfig.page,
          pageSize: self.cuSearchConfig.pageSize,

          info: self.cuSearchConfig.info,
        });
      } finally {
        self.cuSearchConfig.loading = false;
      }
    },
    handleSearchCuSizeChange(size) {
      let self = this;
      self.cuSearchConfig.pageSize = size;
      self.cuSearchConfig.page = 1;
      self.getCuList();
    },
    handleSearchCuPageChange(page) {
      let self = this;
      self.cuSearchConfig.page = page;
      self.getCuList();
    },
    handleCuListSort({ prop, order }) {
      let self = this;
      self.cuSearchConfig.ordering = `${
        order === "descending" ? "-" : ""
      }${prop}`;
      self.getCuList();
    },
    handleRemoteTableSearch() {
      let self = this;
      self.cuSearchConfig.page = 1;
      self.getCuList();
    },
    handleSnrRefresh(row) {
      let self = this;
      self.$store.dispatch(`axios`, {
        method: "get",
        url: `/api/abs/ncp/cu_snr/${row.id}/`,
      });
    },
    handleCuCollection(index, id) {
      let self = this;
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem("cuIdList")) || [];
      if (cuIdList.find((item) => item === id)) {
        // 该终端已收藏，无法重复添加
        self.$message.error(self.$t("message.home.cuCollection.message.err1"));
        return;
      }
      cuIdList.push(id);
      localStorage.setItem("cuIdList", JSON.stringify(cuIdList));
      self.$message.success(self.$t("message.common.info.addSuccess"));
      // set culist的collect属性
      self.$store.commit("setCuListCollected", {
        index: index,
        collected: true,
      });
      // 重新读取首页的culist
      self.$store.dispatch("getCollectionCuList", cuIdList);
    },
    async handleCuCollectionCancel(index, id) {
      let self = this;
      try {
        // 确定要取消收藏
        await self.$confirm(
          self.$t("message.home.cuCollection.message.confirm1"),
          self.$t("message.common.label.prompt"),
          {
            confirmButtonText: self.$t("message.common.button.confirm"),
            cancelButtonText: self.$t("message.common.button.cancel"),
            type: "warning",
          }
        );
      } catch (e) {
        return;
      }
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem("cuIdList")) || [];
      for (let key in cuIdList) {
        if (cuIdList[key] === id) {
          cuIdList.splice(key, 1);
        }
      }
      localStorage.setItem("cuIdList", JSON.stringify(cuIdList));
      self.$message.success(self.$t("message.common.info.deleteSuccess"));
      self.$store.commit("setCuListCollected", {
        index: index,
        collected: false,
      });
      // 重新读取首页的culist
      self.$store.dispatch("getCollectionCuList", cuIdList);
    },
    // 修改地球站经纬度
    handleStationCoordsModify(row) {
      let self = this;
      self.station.form.id = row.station;
      self.station.form.station_name = row.station_name;
      self.station.form.longitude = row.longitude;
      self.station.form.latitude = row.latitude;
      self.station.visible = true;
    },
    async submitForm() {
      let self = this;
      await self.$refs["stationForm"].validate();
      try {
        self.station.loading = true;
        await self.$store.dispatch("axios", {
          method: "patch",
          url: `/api/abs/devices/stations/${self.station.form.id}/`,
          data: {
            longitude: self.station.form.longitude,
            latitude: self.station.form.latitude,
          },
        });
        self.station.visible = false;
      } finally {
        self.station.loading = false;
      }
      // 修改成功
      self.$message.success(self.$t("message.common.info.modifySuccess"));
      await self.$store.dispatch(`getStationList`);
      // await self.$store.dispatch('getCuList')
      await self.getCuList();
      self.createFreqLineCharts();
    },
    // 建链
    handleCuCallBridge(row) {
      let self = this;
      self.cuCallBridge.form.speedOption = self.$service.getOptionList(
        self.$t("message.define.speed")
      );
      self.cuCallBridge.form.id = row.id;
      self.cuCallBridge.visible = true;
    },
    async handleCuCallBridgeSubmit() {
      let self = this;
      try {
        await self.$refs.cuCallBridgeForm.validate();
      } catch (e) {
        return;
      }
      await self.$store.dispatch(`axios`, {
        method: "post",
        url: `/api/abs/ncp/cu_command/${self.cuCallBridge.form.id}/call_bridge/`,
        data: {
          speed_send: self.cuCallBridge.form.speed_send,
          speed_receive: self.cuCallBridge.form.speed_receive,
        },
      });
      // 建链成功
      self.$message.success(
        self.$t("message.home.cuCallBridge.message.callBridgeSuccess")
      );
      self.cuCallBridge.visible = false;
    },
    // 拆链
    async handleCuCallBridgeEnd(row) {
      let self = this;
      await self.$store.dispatch(`axios`, {
        method: "post",
        url: `/api/abs/ncp/cu_command/${row.id}/call_close/`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-col {
  .el-card {
    height: 100%;
  }
}

.progress-div {
  height: 20%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  .progress-div-text {
    padding-left: 20px;
    font-size: 16px;
    flex: 0 0 7em;
  }
  .progress-div-progress {
    padding-left: 10px;
    flex: 1 1 auto;
  }
  .progress-div-count {
    padding-left: 10px;
    flex: 1 1 auto;
  }
}
.home-contain-div {
  padding: 20px;
}
.first-row-card-height {
  height: 300px;
  min-height: 30vh;
}
.second-row-card-height {
  height: 480px;
  min-height: 50vh;
}
.home-table-card {
  height: 230px;
  min-height: calc(25vh - 10px);
}

.remote-dialog-search-div {
  margin: 10px 0;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
.remote-table-snr-cell {
  display: flex;
  justify-content: space-between;
  flex-flow: nowrap;
  align-items: center;
  .refresh-button {
    display: none;
  }
}
.remote-table-snr-cell:hover {
  .refresh-button {
    display: inline-block;
  }
}
.empty-table-data-div {
  cursor: pointer;
  border: dashed 1px #c4c4c4;
}
</style>
                                              